<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>宏任务和微任务</title>
    </head>
    <body>
        <h3>去终端查看结果</h3>
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop">MDN Docs: 并发模型与事件循环</a>
        <a href="https://www.cnblogs.com/bisiyuan/p/16612801.html">博客园</a>
        <a href="https://zhuanlan.zhihu.com/p/87684858">知乎</a>
        <!--在HTML文档中可以通过script元素嵌入JavaScript脚本-->
        <script>
            // 第一个宏任务开始
            // 直接暴露在script元素中的代码属于全局作用域
            console.log(1);
            // 函数setTimeout本身的执行属于同步操作，
            // 但setTimeout第一个参数对应的函数属于异步任务
            setTimeout( () => console.log(2), 0 );
            // 浏览器处理到script时会立即创建一个宏任务
            let p = new Promise((resolve, reject)=>{
                console.log(3);
                resolve();
            });
            // 在当前宏任务中创建一个微任务
            p.then( () => console.log(4) );
        </script>

        <!--同一个script元素内属于一个宏任务-->
        <script>
            // 第二个宏任务开始
            console.log(5);
            // 在当前宏任务中创建一个微任务
            Promise.resolve('hello').then( value => console.log( value ) );
            // 用setTimeout注册一个宏任务
            setTimeout( () => console.log(6), 0 );
        </script>
    </body>
</html>